<template>
  <div class="condition-container">
    <el-collapse-transition>
      <div v-show="showAll">
        <el-row :gutter="20">
          <el-form class="search-form" size="small" :model="queryData" label-width="64px" :inline="true">
            <el-col :span="6">
              <el-form-item label="客户名称">
                <el-input v-model="queryData.customer" placeholder="请输入关键词搜索" clearable style="width:168px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="安装地址">
                <el-input v-model="queryData.installAddress" placeholder="请输入关键词搜索" clearable style="width:168px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="安装位置">
                <el-input v-model="queryData.location" placeholder="请输入关键词搜索" clearable style="width:168px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="主机编码">
                <el-input v-model="queryData.mac" placeholder="请输入关键词搜索" clearable style="width:168px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电视编码">
                <el-input v-model="queryData.tvNo" placeholder="请输入关键词搜索" clearable style="width:168px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="安装尺寸">
                <el-input v-model="queryData.screenSize" placeholder="请输入关键词搜索" clearable style="width:168px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="子元素">
                <el-select class="show-item" size="small" v-model="queryData.showChild" @change="doChangeItem" @clear="doClearItem(false)" style="width:168px;">
                  <el-option v-for="(item, index) in showItemData" :key="index" :label="$t(item.name)" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开机时间">
                <el-time-picker v-model="queryData.startupTimeStart" style="width:168px;" value-format="HH:mm:ss" :picker-options="{
                      selectableRange: '00:00:00 - 23:59:59'
                  }" placeholder="请选择时间点">
                </el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="至">
                <el-time-picker v-model="queryData.startupTimeStart" value-format="HH:mm:ss" style="width:168px;" :picker-options="{
                      selectableRange: '00:00:00 - 23:59:59'
                  }" placeholder="请选择时间点">
                </el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关机时间">
                <el-time-picker v-model="queryData.shutdownTimeStart" value-format="HH:mm:ss" style="width:168px;" :picker-options="{
                      selectableRange: '00:00:00 - 23:59:59'
                  }" placeholder="请选择时间点">
                </el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="至">
                <el-time-picker v-model="queryData.shutdownTimeEnd" value-format="HH:mm:ss" placeholder="请选择时间点" :picker-options="{
                          selectableRange: '00:00:00 - 23:59:59'
                      }" style="width:168px;">
                </el-time-picker>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
    </el-collapse-transition>
    <div class="opration">
      <div class="oprationLeft">
        <el-button size="small" type="danger" :disabled="selectData" icon="el-icon-delete" @click.native="doDelete" v-has="'TERMINAL_TERMINAL_DELETE'">批量删除</el-button>
        <el-button size="small" type="primary" :disabled="selectData" icon="el-icon-edit" @click.native="doSet" v-has="'TERMINAL_TERMINAL_UPDATE'">批量设置</el-button>
        <!-- <bs-set-button-icon @click.native="doSet" v-has="'TERMINAL_TERMINAL_UPDATE'"></bs-set-button-icon> -->
        <!-- <el-select class="show-item" size="small" v-model="showItem" :placeholder="$t('显示子元素')" clearable style="width:105px;margin-right:5px;" @change="doChangeItem" @clear="doClearItem(false)">
                    <el-option v-for="(item, index) in showItemData" :key="index" :label="$t(item.name)" :value="item.value"></el-option>
                </el-select> -->
      </div>
      <div class="oprationRight">
        <el-form :inline="true" size="small" :model="queryData">
          <el-form-item v-show="showSignal">
            <el-select v-model="queryData.queryType" :placeholder="$t('全部选项')" style="width:100px;" @clear="doClearQuery" @change="changeType">
              <el-option v-for="(item, index) in searchItemData" :key="index" :label="$t(item.name)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-show="showSignal">
            <template v-if="queryData.queryType == 1">
              <el-date-picker v-model="queryData.queryDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </template>
            <template v-else-if="queryData.queryType == 5">
              <el-select v-model="queryData.queryParam" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
            <template v-else>
              <el-input :placeholder="$t('请输入关键词搜索')" v-model="queryData.queryParam" clearable style="width:160px;">
                <template slot="prepend"><i class="iconfont icon-sousuo" /></template>
              </el-input>
            </template>

          </el-form-item>
          <el-form-item>
            <bs-search-button-icon @click.native="doList" v-show="showSignal"></bs-search-button-icon>
            <el-button v-show="showSignal" @click.native="doList('reset')">重置</el-button>
            <bs-button v-show="!showSignal" :show-icon="false" class="reset" autofocus="false" text="重置" @click.native="handleClear" />
            <bs-button v-show="!showSignal" :show-icon="false" text="搜索" @click.native="doList" />
            <el-button @click="showAll = !showAll">{{ showAll ? '关闭批量搜索' : '开启批量搜索' }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DeviceInfoCondition',
  data() {
    return {
      value1: '',
      visible: false,
      showAll: false,
      showItemData: [
        { name: '显示子元素', value: true },
        { name: '隐藏子元素', value: false }
      ],

      searchItemData: [
        // { name: '全部选项', value: 0 },
        { name: '设备名称', value: 2 },
        // { name: '设备编号', value: 1 },
        { name: '安装位置', value: 3 },
        { name: '安装城市', value: 4 },
        { name: '审核状态', value: 5 },
        { name: '起止日期', value: 1 },
      ],
      options: [
        { label: '待审核', value: 1 },
        { label: '审核成功', value: 2 },
        { label: '审核失败', value: 3 }
      ],
      showItem: '',
      activeNames: [],
    }
  },
  props: {
    queryData: {
      default: {}
    },
    stateBtnDisabled: {
      type: Boolean,
      default: false
    },
    selectData: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    showSignal() {
      return !this.showAll
    }
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    changeType(e) {
      this.$set(this.queryData, 'queryParam', '')
      this.$set(this.queryData, 'queryDate', [])

    },
    // 刷新
    doRefresh() {
      this.doList({ current: 1 })
      this.$message.success('刷新成功')
    },
    // 显示子元素
    doChangeItem(val) {
      console.log(val)
      this.queryData.showChild = val
      this.doList({ current: 1 })
    },
    doClearItem() {
      this.queryData.showChild = false
    },
    // 点击清除下拉选择条件
    doClearQuery() {
      // this.queryData.queryType = 0
      // this.queryData.queryParam = ''
      this.$set(this.queryData, 'queryDate', [])
      this.$set(this.queryData, 'queryParam', '')
    },
    // 查询
    doList(type) {

      this.queryData.page = 1
      if (type == 'reset') {
        this.$set(this.queryData, 'queryDate', [])
        this.$set(this.queryData, 'queryParam', '')
      }
      this.$eventBus.$emit('doList', this.queryData)
    },
    // 添加
    // doAdd() {
    //     this.$eventBus.$emit('addDeviceDialogShow');
    // },
    // 删除
    doDelete() {
      this.$eventBus.$emit('doDeleteBatch')
    },
    // 设置
    doSet() {
      this.$eventBus.$emit('doSet')
    },
    //布局
    doLayout() {
      this.$emit('layout')
    },
    // 审核
    doExamine() {
      this.$eventBus.$emit('doExamine')
      // const editorForm = {};
      // this.$eventBus.$emit('showDeviceExamineDialog', editorForm);
    },
    // 车辆信息
    doCarInfo() {
      this.$emit('action')
    },
    showMore() {
      if (this.activeNames.length == 0) {
        this.activeNames = ['1']
      } else {
        this.activeNames = []
      }
    },
    more() {
      console.log("点击更多")
    },
    moreSearch() {
      this.visible = false
    }

  }
}
</script>
<style scoped lang="scss">
.condition-container {
  height: 100%;
  min-width:1077px;
}
.show-enter-active,
.show-leave-active {
  transition: all 2s;
}
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
.search-form {
  height: 126px;
  width: 100%;
  min-width: 1110px;
  overflow-y: scroll;
}
</style>
